<template>
	<view>
		<!-- <u-sticky> -->
			<u-notice-bar
			type="none"
			:volume-icon="false"
			:close-icon="true"
			:list="info"
			@end="getInfo()"
			@close="close()"
			:speed="165"
			style="background: #fff;"
			>
			</u-notice-bar>
		<!-- </u-sticky> -->
		
		<view>
			
			<p class="title">
				<span>
					<span>最近赛事HOT</span>
					<u-icon name="thumb-up" color="#dc0821" />
				</span>
				<u-dropdown >
					<u-dropdown-item
					v-model="dropselect"
					title="过滤" 
					:options="dropdownList"
					@change="chooseFilter"
					></u-dropdown-item>
				</u-dropdown>
			</p>
			<cpttShow
        v-for="(item) in cptts" 
        :key="`${item.id}-${item.name}`"
        :cptt="item"
			></cpttShow>
			<view 
        v-if="cptts.length==0"
        class="cpttNull"
			>
				<u-empty text="没有比赛" mode="favor"></u-empty>
			</view>
		</view>
		<view >
			<u-toast ref="uToast" />
		</view>
		<!-- <view>
			跳转=><navigator style="display: inline-block;" url="/pages/login/login">登录页</navigator>
		</view>
		<br v-for="(item,index) in 100"> -->
	</view>
</template>

<script>
  import { getCptt } from '@/api/cpttApis'
	import cpttShow from '../../components/cpttShow.vue'
  import { timeSleep } from '@/util/Functions'
  import { cpttdropdownList } from '@/conf'
	export default {
		data() {
			return {
				info:[],
				cptts:[],
				dropdownList: Object.freeze(cpttdropdownList),
        dropselect:cpttdropdownList[0].value,
        title:''
			}
		},
		onLoad() {
			this.getInfo()
      this.getCptts()
		},
		async onPullDownRefresh() {
			console.log('刷新...')
			if(this.info.toString()=='')
				await this.getInfo()
      await this.getCptts()
      uni.stopPullDownRefresh()
			// getApp().getCptts()
		},
		methods: {
			close(){
				console.log("点击了关闭")
				this.info=[]
			},
      async getCptts(){
        const { dropselect:state } = this
        const { cptts } = await getCptt({state}).catch(e=>{
          return {cptts:[]}
        })
        console.log({cptts})
        this.cptts = cptts
      },
			getInfo(){
				console.log('get')
				this.kRequest('get','https://v1.hitokoto.cn/')
				.then(e=>{
					this.info = [e.hitokoto]
				})
			},
			async chooseFilter(value){
        uni.showLoading({
          title:'by:'+this.dropdownList.find(e=>e.value===value).label
        })
        await this.getCptts()
				await this.$nextTick()
        await timeSleep(400)
        uni.hideLoading()
			}
		},
		components:{
			cpttShow,
		},
	}
</script>

<style scoped lang="scss">
	// .u-dropdown__menu
	.title{
		background: rgba(9,123,245,0.8);
		padding: 2px 20px 4px 10px;
		border-radius: 0px 10px 10px 0px;
		width: 60%;
		/* margin-bottom: 0; */
		display: flex;
		justify-content: space-around;
		span{
			color: #fafafa !important;
		}
		/deep/ .u-dropdown__menu{
			height: 40rpx !important;
			.u-dropdown__menu__item__text{
				span{
					color: #fafafa !important;
				}
			}
		}
		/deep/ .u-dropdown__content{
			top: 24px !important;
			.u-dropdown__content__mask
			{
				display: none;
				background: rgba(0,0,0,0);
			}
		}
		
	}
	.cpttNull{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		zoom: 2;
		// height: 100%;
		// display: flex;
		// justify-content: center;
		// align-items: center;
	}
</style>
